<template>
    <div class="msg">
        <div class="left">
            <img v-if="userData.user_img!=null" :src="userData.user_img" alt="">
            <img v-else src="~assets/img/default_img.jpg" alt="">
        </div>
        <div class="right">
            <ul>
                <li>
                    <p>0</p>
                    <span>粉丝</span>
                </li>
                <span>|</span>
                <li>
                    <p>301</p>
                    <span>关注</span>
                </li>
                <span>|</span>
                <li>
                    <p>4</p>
                    <span>获赞</span>
                </li>
            </ul>
            <div class="rightBottom" @click="$router.push('/edit')">
                <div>编辑资料</div>
            </div>
        </div>
<!--        简介-->
        <div class="bottom">
            <h3>{{userData.name}}</h3>
            <span><img src="~assets/img/等级三.png" alt=""></span>
            <p v-if="userData.user_desc!=null">{{userData.user_desc}}</p>
            <p v-else>这个人很神秘，什么也没有写</p>
        </div>
<!--        作品区-->
        <div class="create">
            <ul>
                <li>动态</li>
                <li>视频</li>
                <li>相簿</li>
            </ul>

        </div>
    </div>
</template>

<script>
    export default {
        name: "UserHomeImages",
        data(){
            return{}
        },
        props:['userData'],
        created() {

        }
    }
</script>

<style scoped lang="less">
    p,h3{
        margin: 0;
        padding: 0;
    }
    .msg{
        background-color: white;
        position: relative;
        z-index: 99;
        margin-top: 24.194vw;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        .left {
            margin-left: 3.871vw;
            img{
            width: 23.226vw;
            height: 23.226vw;
            border-radius: 50%;
            }
        }
        .right{
            margin-right: 3.226vw;
            margin-top: 3.226vw;
            ul{
                display: flex;
                justify-content: space-between;
                padding: 0 6.452vw;
                span{
                    color:#e7e7e7;
                }
                li{
                    text-align: center;
                    p{
                        font-size: 3.871vw;
                        color: black;
                        margin: 0;
                        line-height: 1.935vw;

                    }
                    span{
                        color: #999;
                        font-size: 3.097vw;
                    }
                }
            }
            .rightBottom{
                background: #fff;
                border: 0.323vw solid #fb7299;
                color: #fb7299;
                width: 58.065vw;
                display: block;
                height: 8.387vw;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                border-radius: 1.06667vw;
                font-size: 3.73333vw;
                margin-top: 3.2vw;
                text-align: center;
                line-height: 8.387vw;
            }
        }
        .bottom{
            margin-top: 2.581vw;
            margin-left: 3.871vw;
            h3{
                font-size: 5.161vw;
                color: #212121;
                max-width: 62.66667vw;
                vertical-align: middle;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                display: inline-block;
                font-weight: normal;
            }
            img{
                width: 6.452vw;
                margin-left: 3.226vw;
            }
            p {
                margin-top: 2.13333vw;
                font-size: 3.46667vw;
                color: #999;
                line-height: 4.53333vw;
                width: 83.46667vw;
                height: 4.53333vw;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                float: left;
            }
        }
        .create{
            width: 100%;
            margin-top: 3.226vw;
            padding: 3.226vw 4.839vw;
            background: #fff;
            border-top: 0.323vw solid #e7e7e7;
            border-bottom: 0.323vw solid #e7e7e7;
            display: inline-block;
            color: #757575;
            font-size: 3.46667vw;
            ul{
                display: flex;
                li{
                    margin-right: 8.065vw;
                }
            }

        }

    }

</style>